<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="./js/jquery-3.7.1.min.js"></script>
  <script>
    $(function () {
      //    <input type="button" value="将张三放置在city的后面" id="b1">
      $("#b1").click(function () {
        $("#city").append($("#zs"))
      })
      //    <input type="button" value="将张三放置在city的前面" id="b2">
      $("#b2").click(function () {
        $("#city").prepend($("#zs"))
      })
      //    <input type="button" value="将李四放置在北京的后面" id="b3">
      $("#b3").click(function () {
        // $("#bj").after($("#ls"))
        $("#ls").insertAfter($("#bj"))
      })
      //    <input type="button" value="将李四放置在福州的前面" id="b4">
      $("#b4").click(function () {
        // $("#fz").before($("#ls"))
        $("#ls").insertBefore( $("#fz"))
      })


      // <input type="button" value="删除 <li id='bj'>北京</li>" id="b5">
      $("#b5").click(function () {
        $("#bj").remove()
      })

      // <input type="button" value="清空id=city的全部内容" id="b6">
      $("#b6").click(function () {
        $("#city").empty()
      })

    })
  </script>
</head>
<body>
<input type="button" value="将张三放置在city的后面" id="b1">
<input type="button" value="将张三放置在city的前面" id="b2">
<input type="button" value="将李四放置在北京的后面" id="b3">
<input type="button" value="将李四放置在福州的前面" id="b4">

<input type="button" value="删除 <li id='bj'>北京</li>" id="b5">
<input type="button" value="清空id=city的全部内容" id="b6">

<ul id="city">
  <li id="bj">北京</li>
  <li id="sh">上海</li>
  <li id="tj">天津</li>
  <li id="fz">福州</li>
</ul>



<ul>
  <li id="zs">张三</li>
  <li id="ls">李四</li>
</ul>
</body>
</html>